<template>
  <!-- 轮播图 -->
  <div>
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img :src="image.img" />
      </van-swipe-item>
    </van-swipe>
  </div>
  <!-- 热门视频 -->
  热门视频
  <div class="hotVideos">
    <van-grid :border="false" :column-num="2">
      <van-grid-item v-for="(item, index) in hotVideos" :key="index" @click="tocart(item)">
        <van-image :src="item.img" />
      </van-grid-item>
    </van-grid>
  </div>
</template>
<script lang="ts">
import { defineComponent, getCurrentInstance, ref } from "vue";
import  { useStore } from 'vuex'  //Vuex 的状态
export default defineComponent({
  name: "HomeTop",
  setup() {
     const store  =  useStore()

    const { proxy }: any = getCurrentInstance();

    const images = ref<any>(null);

    const hotVideos = ref<any>(null);
    //获取首页轮播和热门视频的资源
    function getSource() {
      proxy.$http
        .get("/api/homePhoto")
        .then((res: any) => {
          if (res.data.code == 0) {
            images.value = res.data.data[0].bannerList;
            hotVideos.value = res.data.data[1].videoList;
          }
        })
        .catch((error: any) => {
          console.log(error);
        });
    }
    getSource();
   //定义添加商品到购物车
   function  tocart(item:any){
      proxy.$toast.success('成功添加到购物车')
      store.commit('tocart',item)  //传递方法和数据
      store.commit('getcart')
   }
    return {
      images,
      hotVideos,
      tocart
    };
  },
});
</script>
<style scoped>
img {
  width: 100%;
}
.hotVideos {
  margin-bottom: 3rem;
}
</style>